body {
  /*Para que no se vea borde vacio en la página*/
  margin: 0;

  /*Tipo de texto de toda la página*/
  font-family: 'segoe ui';
}

#fotos-header {
  /*Imagen de fondo*/
  background-image: url(../edificio-escuela.jpg);

  /*definir extensión del cuadro azul transparente*/
	padding: 250px 100px;
	
  /*Para que la imagen se centralice al achicar la ventana*/
  background-position: center center;

  /*Para que la imagen se ajuste al espacio en la página*/
	background-size: cover;

	/*Para que la imagen siempre sea del mismo tamaño que el cuadro azul transparente*/
	position: relative;
}

#fotos-header:before {
  /*Para que se muestre enfrente de la imagen*/
	content:'';
	position: absolute;

  /*De donde a donde llega el cuadro transparente azul*/
  top: 0;
	bottom: 0;
	left: 0;
	right: 0;

  /*Color del cuadro transparente*/
	background-color: #01b1f770;
}

#fotos-header p {
  /*Tamaño y color del texto*/
	font-size: 40px;
	color: #fff;

  /*Para que se muestre al frente de todo*/
  position: relative;

  /*Para que las dos líneas de texto queden pegadas verticalmente*/
  margin: 0;
}

.hipervinculos ul {
  /*Para eliminar bullets*/
  list-style-type: none;

  /*Color de fondo*/
  background-color: #01b1f7;

  /*Para que no haya lineas entre foto y fondo negro*/
  margin: 0;
  padding: 0;
  
  /*Alinear links al centro*/
  text-align: center;
}

.hipervinculos li {
  /*Para que esten uno al lado del otro*/
  display: inline-block;
}

.hipervinculos a {
  /*color del texto*/
  color: white;

  /*Tamaño del fondo, que corra con la pagina*/
  padding: 14px 16px;
  display: block;

  /*Para eliminar formato de link*/
  text-decoration: none;

  transition: background-color 0.3s ease-in;
}

.hipervinculos a:hover {
  /*Cambia de color de texto y fondo cuando el cursor esta encima*/
  background-color: aliceblue;
  color: black;
}

header h2 {
  /*Color de texto y fondo*/
  color: white;
  background-color: black;

  /*Para que quede pegado a los links*/
  margin: 0;

  /*Altura y ancho del fondo*/
  width: 100%;
  padding: 10px 0;
}

.oportunidades {
  /*Centralizar el texto de todas las etiquetas dentro de esta*/  
  text-align: center;
}


.fila img {
  /*Imagenes no se salgan del cuadrado*/
  width: 80%;
}

.column {
  /*Para que cuadros estén en una misma fila*/  
  display:inline-block;

  /*El espacio en blanco entre los cuadros*/
  padding: 0 90px 60px;

  /*Alineamiento de los cuadros verticalmente*/
  vertical-align: middle;
}

.card {
  /* Añade el efecto "cuadrado"*/ 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
  background-color: whitesmoke;

  /*Controla el tamaño del cuadrado*/
  padding: 16px 30px;

  /*Controla el espacio donde se puede ubicar el contenido del cuadrado*/
  height: 250px; 
  width: 200px;

  transition: background-color 0.3s ease-in;
}

.card:hover {
  background-color: #01b1f7;
  color: whitesmoke;
}





#fotos-body {
  /*Centralizar titulo*/
  text-align: center;

  /*Imagen de fondo*/
  background-image: url(../columns.jpg);

  /*definir extensión del cuadro azul transparente*/
	padding: 90px 100px;
	
  /*Para que la imagen se centralice al achicar la ventana*/
  background-position: center center;

  /*Para que la imagen se ajuste al espacio en la página*/
	background-size: cover;

	/*Para que la imagen siempre sea del mismo tamaño que el cuadro azul transparente*/
	position: relative;
}

#fotos-body:before {
	/*Para que se muestre enfrente de la imagen*/
  content:'';
  position: absolute;
  
  /*De donde a donde llega el cuadro transparente azul*/
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  /*Color del cuadro transparentebackground-color: #01b1f770;*/
  background-color: #01b1f795;
}


#fotos-body p {
  /*Formato del texto*/
	font-size: 20px;
	color: white;
  text-align: justify;

  /*Este al frente de todo*/
  position: relative;

  /*Eliminar espacio de margenes*/
  margin: 0;
}

#fotos-body h1 {
  /*Color del texto*/
  color: white;

  /*Este al frente de todo*/
  position: relative;
}




.objetivos {
  color: white;
  background-color: #01b1f7;
  margin: 0 0 20px;
  padding: 20px 0;
}

.objetivos h2 {
  width: 100%;
  padding: 20px 0px;
  text-align: center;
  margin: 0;
}

.par {
  margin: 10px 93px;
}

.objetivos ul {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 10px 0 0 0;
}

.objetivos li {
  height: 150px;
  width: 300px; 
  display: inline-block;
  vertical-align: top;
  padding: 0px 20px;
}

.objetivos ul p {
  text-align: justify;
}

.cursos {
  margin: 50px 0 80px;
}

.cursos h2 {
  text-align: center;
  font-size: 25px;
  margin: 0px;
}

.container {
display: flex;
justify-content: center;
align-items: center;
margin: 7vmin 7vmin 7vmin;
overflow: hidden;
transform: skew(5deg);
}

.container .card1 {
flex: 1;
transition: all 1s ease-in-out;
height: 75vmin;
position: relative;
}

.container .card1 .card__head {
color: white;
background: #01b1f7;
padding: 0.5em;
transform: rotate(-90deg);
transform-origin: 0% 0%;
transition: all 0.5s ease-in-out;
min-width: 100%;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
font-size: 1em;
white-space: nowrap;
}
.container .card1:hover {
flex-grow: 10;
}
.container .card1:hover img {
filter: grayscale(0);
}
.container .card1:hover .card__head {
text-align: center;
top: calc(100% - 2em);
color: white;
background: rgba(0, 0, 0, 0.5);
font-size: 2em;
transform: rotate(0deg) skew(-5deg);
}
.container .card1 img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 1s ease-in-out;
filter: grayscale(100%);
}
.container .card1:not(:nth-child(5)) {
margin-right: 1em;
}



.ubicacion {
  background-color: black;
  margin: 0 0 50px;
  display: flex;
  text-align: center;
  vertical-align: middle;
  height: 100%;
}


.ubicacion h2 {
  color: white;
  margin: 0;
  width: 80%;
  padding: 17% 10%;
  height: 20%;
  font-size: 40px;
}

.ubicacion iframe {
  width: 80%;
  height: 440px;
  border: 0px;
}

.inro {
  text-align: center;
  font-size: 25px;
}

.reviews {
  display: inline-block;
  width:100%;
}

/* center the blockquote in the page */
.blockquote-wrapper {
  display: flex;
  height: 400px;
  padding: 0 20px;
  margin: 10px;
}

/* Blockquote main style */
.blockquote {
   position: relative;
   font-family: 'Montserrat', sans-serif;
   font-weight: 800;
   color: black;
   padding: 20px 0;
   width: 100%;
   max-width: 500px;
   z-index: 1;
   margin: 20px 20px auto;
   align-self: center;
   border-top: solid 1px;
   border-bottom: solid 1px;
}

/* Blockquote header */
.blockquote h1 {
   position: relative;
   color: black;
   font-size: 40px;
   font-weight: 800;
   line-height: 1;
   margin: 0;
}

/* Blockquote right double quotes */
.blockquote:after {
   position: absolute;
   content: "”";
   color: black;
   font-size: 9rem;
   line-height: 0;
   bottom: -43px;
   right: 30px;
}

/* increase header size after 600px */
@media all and (min-width: 600px) {
   .blockquote h1 {
       font-size: 60px;
  }

}

/* Blockquote subheader */
.blockquote h4 {
   position: relative;
   color: #292a2b;
   font-size: 1.4rem;
   font-weight: normal;
   line-height: 1;
   margin: 0;
   padding-top: 20px;
   z-index: 1;
}

footer {
  background-color: #01b1f7;
  color: white;
  margin: 0, auto;
  text-align: center;
  font-family: "segoe ui";
}

.footer-bottom div {
  display: inline-block;
  text-align: left;
  vertical-align: top;
  padding: 15px 80px 15px;
}

.footer-bottom ul {
   list-style-type: none;
   padding-left: 0;
}

.footer-bottom a {
  text-decoration: none;
  display: block;
  color: white;
  transition: all 0.45s;
}

#rafael-footer {
  vertical-align: bottom;
  padding-bottom: 0px;
}

#rafael-footer img {
  height: 150px;
}

footer p {
  padding: 5px 0 10px;
  margin: 0;
  background-color: black;
}

footer a:hover {
  /*Cambia de color de texto y fondo cuando el cursor esta encima*/
  color: black;
}

/*Formato para pantallas de cel*/
@media only screen and (max-width: 481) {

  .column {
    /*El espacio en blanco entre los cuadros*/
    padding: 0 90px 60px;
  
    /*Alineamiento de los cuadros verticalmente*/
    text-align: center;
  }

  .footer-bottom div {
    text-align: left;
    float:left;
    padding: 0;
  }


}